<template>
  <div class="vue-container">
    <el-row v-loading="loading" :gutter="24" class="server-all">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <div style="display: flex;align-items: center;">
              <svg-icon icon-class="redis.svg" style="margin-top: 5px;" />
              <span style="margin-left: 10px;">缓存信息</span>
            </div>
          </div>
          <el-descriptions direction="vertical" :column="8" border>
            <el-descriptions-item label="服务启动路径" :span="4">{{ data.executable }}</el-descriptions-item>
            <el-descriptions-item label="配置文件路径" :span="4">{{ data.configFile }}</el-descriptions-item>
            <el-descriptions-item label="版本号">{{ data.version }}</el-descriptions-item>
            <el-descriptions-item label="运行模式">
              <el-tag v-if="data.mode === 'standalone'" type="info">单机</el-tag>
              <el-tag v-if="data.mode === 'sentinel'" type="success">主从</el-tag>
              <el-tag v-if="data.mode === 'cluster'">集群</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="操作系统版本信息" :span="2">{{ data.os }}</el-descriptions-item>
            <el-descriptions-item label="架构">{{ data.archBits }}</el-descriptions-item>
            <el-descriptions-item label="GCC版本">{{ data.gccVersion }}</el-descriptions-item>
            <el-descriptions-item label="运行时间" :span="2">{{ data.runningTime }}</el-descriptions-item>
            <el-descriptions-item label="客户端连接数">{{ data.connectedClients }}</el-descriptions-item>
            <el-descriptions-item label="客户端阻塞数">{{ data.blockedClients }}</el-descriptions-item>
            <el-descriptions-item label="分配内存大小">{{ data.usedMemoryHuman }}</el-descriptions-item>
            <el-descriptions-item label="占用操作系统的资源大小">{{ data.usedMemoryRssHuman }}</el-descriptions-item>
            <el-descriptions-item label="内存消耗峰值">{{ data.usedMemoryPeakHuman }}</el-descriptions-item>
            <el-descriptions-item label="操作系统内存总大小">{{ data.totalSystemMemoryHuman }}</el-descriptions-item>
            <el-descriptions-item label="lua占用内存">{{ data.usedMemoryLuaHuman }}</el-descriptions-item>
            <el-descriptions-item label="最大内存限制">{{ data.maxMemoryHuman }}</el-descriptions-item>
            <el-descriptions-item label="达到最大内存的淘汰策略" :span="8">
              <el-tag v-if="data.maxmemoryPolicy === 'noeviction'" type="info">永不过期，返回错误</el-tag>
              <el-tag v-if="data.maxmemoryPolicy === 'volatile-ttl'" type="danger">删除即将过期的</el-tag>
              <el-tag v-if="data.maxmemoryPolicy === 'allkeys-random'" type="warning">随机删除</el-tag>
              <el-tag v-if="data.maxmemoryPolicy === 'volatile-random'" effect="dark" type="warning">随机删除即将过期key</el-tag>
              <el-tag v-if="data.maxmemoryPolicy === 'allkeys-lru'" effect="dark" type="danger">删除lru算法的key</el-tag>
              <el-tag v-if="data.maxmemoryPolicy === 'volatile-lru'">只对设置了过期时间的key进行LRU</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="RDB是否成功">
              <el-tag v-if="data.rdbLastBgsaveStatus === 'ok'" type="success">{{ data.rdbLastBgsaveStatus }}</el-tag>
              <el-tag v-else type="danger">{{ data.rdbLastBgsaveStatus }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="是否开启了aof">
              <el-tag v-if="data.aofEnabled === 0" type="info">关闭</el-tag>
              <el-tag v-if="data.aofEnabled === 1" type="success">开启</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="新创建连接个数">{{ data.totalConnectionsReceived }}</el-descriptions-item>
            <el-descriptions-item label="处理的命令数">{{ data.totalCommandsProcessed }}</el-descriptions-item>
            <el-descriptions-item label="当前QPS">{{ data.instantaneousOpsPerSec }}</el-descriptions-item>
            <el-descriptions-item label="网络入口流量字节数">{{ data.totalNetInputbytes }} bytes</el-descriptions-item>
            <el-descriptions-item label="网络出口流量字节数">{{ data.totalNetOutputBytes }} bytes</el-descriptions-item>
            <el-descriptions-item label="网络入口速率">{{ data.instantaneousInputKbps }}</el-descriptions-item>
            <el-descriptions-item label="网络出口速率">{{ data.instantaneousOutputKbps }}</el-descriptions-item>
            <el-descriptions-item label="拒绝的连接数">{{ data.rejectedConnections }}</el-descriptions-item>
            <el-descriptions-item label="Key过期数量">{{ data.expiredKeys }}</el-descriptions-item>
            <el-descriptions-item label="键值统计信息">{{ data.keyspace }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { detail } from '@/api/ops/redis'
export default {
  name: 'Redis',
  data() {
    return {
      loading: false, // 页面加载loading
      data: { // 页面数据
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 获取服务器详情
    getDetail() {
      this.loading = true
      detail().then(res => {
        this.data = res.data
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style scoped lang="scss">
.server-all {
  padding: 20px;
}
</style>
